<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: center;line-height: 30px">
        <h3>添加采购商品</h3>
      </div>

      <div class="text item">
        <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="24"><div class="grid-content bg-purple" style="text-align: center">
                  <el-form-item label="商品编号" prop="name">
                    <el-input v-model="cargoSerial"></el-input>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <br>
              <br>
              <el-row>
                <el-col :span="24"><div class="grid-content bg-purple" style="text-align: center">
                  <el-form-item label="商品名称" prop="name">
                    <el-input v-model="cargoName"></el-input>
                  </el-form-item>
                </div></el-col>
              </el-row><br><br>
              <el-row>
                <el-col :span="24"><div class="grid-content bg-purple" style="text-align: center">
                  <el-form-item label="厂家" prop="name">
                    <el-input v-model="cargoFactory"></el-input>
                  </el-form-item>
                </div></el-col>
              </el-row><br>
            </div></el-col>

            <el-col :span="12"><div class="grid-content bg-purple-light" style="text-align: center">
              <el-upload style="align-content: center;text-align: center"
                         action="apj/cargo/cargoImg"
                         list-type="picture-card"
                         name="cargoImg"
                         :auto-upload="true"
                         :on-success="uploadSuccess">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url" alt="">
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <el-button style="text-align: center;align-content: center">上传头像</el-button>
            </div></el-col>

          </el-row>
          <br>

          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple" style="text-align: center" >
              <el-form-item label="类别" prop="name">
                <el-input v-model="cargoType"></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light" style="text-align: center">
              <el-form-item label="采购" prop="name">
                <el-input v-model="cargoNumber"></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <br>

          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple" style="text-align: center">
              <el-form-item label="建议采购价" prop="name">
                <el-input v-model="cargoBuymoney"></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light" style="text-align: center">
              <el-form-item label="建议销售价" prop="name">
                <el-input v-model="goSalemoney"></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <br>

          <el-row>
            <div style="text-align: center">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">添加</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AddBuyCargo",
  data(){
    return{
      dialogImageUrl: '',
      dialogVisible: false,
      cargoSerial:'',
      cargoName:'',
      cargoFactory:'',
      cargoType:'',
      cargoBuymoney:'',
      goSalemoney:'',
      cargoNumber:'',
      cargoImg:''
    }
  },
  methods:{
    uploadSuccess(response, file, fileList){
      console.log(response)
      this.cargoImg = response
      console.log(file)
      console.log(fileList)
    },
    onSubmit(){
      let url = 'apj/buyshorttime/insertCargo'
      console.log(this.cargoSerial)
      console.log(this.cargoName)
      console.log(this.cargoFactory)
      console.log(this.goSalemoney)
      console.log(this.cargoNumber)
      let fd = new FormData
      fd.append("cargoSerial",this.cargoSerial)
      fd.append("cargoName",this.cargoName)
      fd.append("cargoFactory",this.cargoFactory)
      fd.append("cargoType",this.cargoType)
      fd.append("cargoBuymoney",this.cargoBuymoney)
      fd.append("goSalemoney",this.goSalemoney)
      fd.append("cargoNumber",this.cargoNumber)
      fd.append("cargoImg",this.cargoImg)
      this.$axios.post(url,fd).then(r=>{
        this.$message.success(r.data)
        this.$emit("init") //刷新主界面
        this.$emit("close") //关闭Dialog
      })
    }
  }
}
</script>

<style scoped>

</style>